<template>
  <div class="emergencyPlan">
    <div class="select">
      <a-select
        class="selectGate"
        v-model:value="state.selectValue1"
        style="width: 180px"
      >
        <a-select-option value="za1">配水预案</a-select-option>
        <a-select-option value="za2">防汛抗旱预案</a-select-option>
      </a-select>
      <a-select
        class="selectGate"
        v-model:value="state.selectValue2"
        style="width: 180px; margin: 0 10px"
      >
        <a-select-option value="ya1">产量最优配置模型预案</a-select-option>
        <a-select-option value="ya2">品质最优配置模型预案</a-select-option>
        <a-select-option value="ya3">节水优先配置模型预案</a-select-option>
        <a-select-option value="ya4">综合调度配置模型预案</a-select-option>
      </a-select>
    </div>
    <CesiumCommon />
    <LeftCommon :selectData="state.selectData" :handleClickRow="handleClickRow" />
    <RightCommon />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, provide, onMounted, watch } from "vue";
import LeftCommon from "./left-common/index.vue";
import RightCommon from "./right-common/index.vue";
import CesiumCommon from "./cesium-common/index.vue";
import mockData from "./mockData/data.ts";

defineOptions({ name: "EmergencyPlan" });

const detailData = ref(null);
const state = reactive({
  selectValue1: "za1",
  selectValue2: "ya1",
  selectData: [],
});

watch(
  () => state.selectValue2,
  (val) => {
    state.selectData = mockData[`${state.selectValue2}_data`];
  },
  { deep: true }
);

const handleClickRow = (data) => {
  detailData.value = data;
};

provide("DetailData", detailData);

onMounted(() => {
  state.selectData = mockData[`${state.selectValue2}_data`];
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.emergencyPlan {
  width: 100%;
  height: 100%;
  position: relative;

  .select {
    width: 400px;
    position: absolute;
    left: 390px;
    top: 56px;
    z-index: 999;
    ::v-deep(.selectGate) {
      .ant-select-selector {
        color: #b4dfff;
        border: 1px solid rgba(6, 183, 253, 0.4);
        font-size: 14px;
        background: #003e7eb5;
        border-radius: 6px;
      }
      .ant-select-arrow {
        color: #b4dfff;
      }
    }
  }
  .wrapBG {
    width: 100%;
    height: 100%;
    background: url(@/assets/images/bg.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    z-index: 100;
    pointer-events: none;
  }
}
</style>
